<template>
  <div id="map">
    <Modal v-model="modalchart"
           :mask-closable="false"
           draggable>
      <div id="chartLine"
           style="width:480px;height:300px; background: #fff;"></div>
    </Modal>
    <!-- <el-row style="">
      <el-col :span="4"><Button type="primary"
                @click="openTimeLine">历史数据</Button></el-col>
      <el-col :span="4"><Button type="primary"
                @click="stopTimeLine">停止播放</Button></el-col>
      <el-col :span="16"><input id="history-map"
               type="range"
               value=''
               v-model="timevalue"
               min="0"
               max="2"
               style="width:100%;margin-top:5px;margin-bottom:5px" /></el-col>
    </el-row> -->
  </div>
</template>

<script>
import "ol/ol.css";
import XYZ from "ol/source/XYZ";
import MVT from "ol/format/MVT.js";
import OSM from "ol/source/OSM.js";
import ImageWMS from "ol/source/ImageWMS";
import Projection from "ol/proj/Projection";
import Overlay from "ol/Overlay.js";
import { Map, View } from "ol";
import { toStringHDMS } from "ol/coordinate.js";
import { Image as ImageLayer, Tile as TileLayer } from "ol/layer";
import { Fill, Icon, Stroke, Style, Text } from "ol/style.js";
import echarts from "echarts";

export default {
  data () {
    return {
      map: null,
      projection: new Projection({
        code: "EPSG:4326",
        units: "degrees",
        axisOrientation: "neu",
        global: true
      }),
      format: "image/png",
      bounds: [-180, -90, 180, 90],
      center: [113.0, 29.84229],
      lyrs: [
        new TileLayer({
          source: new OSM({
            url: "http://tile-{a-c}.openstreetmap.fr/hot/{z}/{x}/{y}.png" //osm地形
          }),
        })
      ],
      zoomnum: 12,
      wms_url: "http://localhost:8090/geoserver/cite/wms",
      lyr_name: "cite:taizishan0",
      chartLine: null,
      modalchart: false,
      timevalue: 0,
      setinterval: null,
      data: []
    };
  },
  computed: {
    tindex: function() {
      return this.$router.query.id;
    }
  },
  created () {
    this.updateParams();
  },
  mounted () {
    // 时刻谨记作用域，箭头函数
    var view = new View({
      projection: this.projection,
      center: this.center,
      zoom: this.zoomnum
    });
    var map = new Map({
      target: "map",
      layers: this.lyrs,
      view: view
    });
    this.map = map;
    map.on("singleclick", evt => {
      var coordinate = evt.coordinate;
      //				document.getElementById('info').innerHTML = '';
      var viewResolution = /** @type {number} */ (view.getResolution());
      var url = this.lyrs[1]
        .getSource()
        .getGetFeatureInfoUrl(evt.coordinate, viewResolution, "EPSG:4326", {
          INFO_FORMAT: "application/json"
        });
      if (url) {
        //					console.log(url)
        this.$axios.get(url).then(res => {
          console.log(res);
        });
      }
      this.drawLineChart();
      this.modalchart = true;
    });
  },
  methods: {
    updateParams () {
      let type = this.$route.query.type;
      this.bounds = [111.8269517, 30.7315583, 113.5100483, 31.003125];
      this.lyrs.push(
        new ImageLayer({
          extent: this.bounds,
          source: new ImageWMS({
            ratio: 1,
            url: this.wms_url,
            params: {
              VERSION: "1.1.1",
              STYLES: "",
              LAYERS: this.lyr_name,
              exceptions: "application/vnd.ogc.se_inimage"
            }
          })
        })
      );
      this.center = [112.89757, 30.92803];
      this.zoomnum = 12;

      //chartline
    },
    getTransParam () {
      console.log(this.$route.query.type);
    },
    drawLineChart () {
      this.data = [];
      for (var i = 0; i < 7; i++) {
        this.data.push(Math.random());
      }
      this.chartLine = echarts.init(document.getElementById("chartLine"));
      this.chartLine.setOption({
        title: {
          text: ""
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["", "", ""]
        },
        grid: {
          containLabel: false
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2010", "2011", "2012", "2013", "2014", "2015", "2016"]
        },
        yAxis: {
          type: "value"
        },
        series: [{
          name: "搜索引擎",
          type: "line",
          stack: "总量",
          data: this.data
        }]
      });
    },
    openTimeLine () {
      this.setinterval = setInterval(() => {
        this.timevalue = this.timevalue + 1;
        if (this.timevalue == 3) {
          this.timevalue = 0;
        };
        let wms = new ImageLayer({
          extent: this.bounds,
          source: new ImageWMS({
            ratio: 1,
            url: this.wms_url,
            params: {
              VERSION: "1.1.1",
              STYLES: "",
              LAYERS: "tzishan" + this.timevalue.toString(),
              exceptions: "application/vnd.ogc.se_inimage"
            }
          })
        });
        let uplyrs = this.lyrs.pop();
        this.map.removeLayer(uplyrs);
        this.lyrs.push(wms);
        this.map.addLayer(wms);
      }, 2000);
      //
    },
    stopTimeLine () {
      clearInterval(this.setinterval);
    },
    removeAllLayer () {
      //
    },
    addLayer () {
      //
    }

  }
};
</script>

<style scoped>
</style>